<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="/css/login.css">
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <i class="fas fa-user-circle icon"></i>
            <h2>系统登录</h2>
        </div>
        
        <!-- 添加返回按钮 -->
        <div class="back-home">
            <a href="/" class="back-btn">
                <i class="fas fa-arrow-left"></i> 返回主页
            </a>
        </div>
        
        <!-- 错误提示 -->
        <div id="errorMessage" class="error-message"></div>

        <form id="loginForm">
            <div class="form-group">
                <label>用户名</label>
                <i class="fas fa-user"></i>
                <input type="text" id="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label>密码</label>
                <i class="fas fa-lock"></i>
                <input type="password" id="password" placeholder="请输入密码" required>
            </div>
            <div class="form-group">
                <label>验证码</label>
                <div style="display: flex; gap: 10px;">
                    <div style="position: relative; flex: 1;">
                        <i class="fas fa-shield-alt" style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%);"></i>
                        <input type="text" id="captcha" placeholder="请输入验证码" required style="padding-left: 45px;">
                    </div>
                    <img id="captchaImage" style="height: 45px; cursor: pointer; border-radius: 4px;" 
                         onclick="refreshCaptcha()" title="点击刷新验证码">
                </div>
            </div>
            <button type="submit">
                <i class="fas fa-sign-in-alt"></i> 登录
            </button>
        </form>
    </div>

    <div class="toast-container" id="toastContainer"></div>

    <script>
        // 刷新验证码
        async function refreshCaptcha() {
            const img = document.getElementById('captchaImage');
            img.src = '/api/captcha?' + new Date().getTime();
        }

        // 页面加载时加载验证码
        document.addEventListener('DOMContentLoaded', refreshCaptcha);

        // 删除原有的 showError 函数，改用 showToast 函数
        function showToast(message, type = 'info') {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            toast.className = `toast ${type}`;
            
            let icon = '';
            switch(type) {
                case 'success':
                    icon = 'check-circle';
                    break;
                case 'error':
                    icon = 'times-circle';
                    break;
                default:
                    icon = 'info-circle';
            }
            
            toast.innerHTML = `
                <i class="fas fa-${icon} toast-icon"></i>
                <div class="toast-message">${message}</div>
            `;
            
            container.appendChild(toast);
            
            // 3秒后移除提示框
            setTimeout(() => {
                toast.addEventListener('animationend', () => {
                    container.removeChild(toast);
                });
            }, 3000);
        }

        // 修改登录表单提交处理
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const username = document.getElementById('username').value;
            const rawPassword = document.getElementById('password').value;
            const captcha = document.getElementById('captcha').value;
            
            const hashedPassword = CryptoJS.SHA256(rawPassword).toString();

            try {
                const response = await fetch('/api/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ 
                        username,
                        password: hashedPassword,
                        captcha,
                        isHashed: true 
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    showToast('登录成功，正在跳转...', 'success');
                    // 获取返回URL，如果没有则默认返回主页
                    const returnUrl = sessionStorage.getItem('returnUrl') || '/';
                    sessionStorage.removeItem('returnUrl'); // 清除存储的URL
                    setTimeout(() => {
                        window.location.href = returnUrl;
                    }, 1000);
                } else {
                    // 使用统一的错误提示，不区分具体是用户名还是密码错误
                    if (data.message.includes('用户') || data.message.includes('密码')) {
                        showToast('用户名或密码错误', 'error');
                    } else if (data.message.includes('验证码')) {
                        showToast('验证码错误', 'error');
                    } else {
                        showToast(data.message, 'error');
                    }
                    refreshCaptcha();
                    document.getElementById('captcha').value = '';
                    
                    // 如果是用户名或密码错误，清空密码输入框
                    if (data.message.includes('用户') || data.message.includes('密码')) {
                        document.getElementById('password').value = '';
                    }
                }
            } catch (error) {
                showToast('登录失败，请重试', 'error');
                refreshCaptcha();
                document.getElementById('password').value = '';
            }
        });
    </script>
</body>
</html> 